<!-- 快速筛选项目-->
<template>
	<div class="quick-screen-component">
		<!-- 横向点击筛选项 -->
		<template v-for=" (quickItem, index) in horizontalList">
			<div
				v-if="quickItem.enumData.length"
				class="quick-item"
				:class="open['open' + index]?'':'pack'"
				:key="quickItem.key"
			>
				<ul class="quick-item-ul flex" :ref="'horListRef'+index">
					<li class="quick-name mar-12" :style="'width:'+quickNameLength+'px'">{{ quickItem.quickName }}</li>
					<div class="quick-h-option flex">
						<li
							class="quick-btn"
							:class="{'active theme_font_color':!quickParams[quickItem.key]}"
							@click="change(quickItem,'')"
						>
							全部
						</li>
						<li
							class="quick-btn"
							:class="{'active theme_font_color': quickParams[quickItem.key] === enumItem.code}"
							@click="change(quickItem,enumItem.code)"
							v-for=" (enumItem , index) in quickItem.enumData"
							:key="index"
						>
							{{ enumItem.name }}
						</li>
					</div>
					<i
						class="unfold theme_font_color"
						v-show=" height['hoHeight'+index] > 32"
						@click="changeOpenStatu(index)"
					>
						{{ open['open' + index]?'收起':'展开' }}
						<i :class="open['open' + index]?'el-icon-arrow-up':'el-icon-arrow-down'" />
					</i>
				</ul>
			</div>
		</template>
		<!-- 更多项 -->
		<div class="quick-item" v-if="dropDownList.length">
			<ul class="flex">
				<li class="quick-name mar-12" :style="'width:'+quickNameLength+'px'">更多</li>
				<div class="mar-16" v-for=" quickItem in dropDownList" :key="quickItem.key">
					<el-select :placeholder="quickItem.placeholder" v-model="quickParams[quickItem.key]">
						<el-option
							v-for="item in quickItem.dataList"
							:key="item.code"
							:label="item.name"
							:value="item.code"
						/>
					</el-select>
				</div>
			</ul>
		</div>
		<div />
	</div>
</template>

<script>

/**
 * 筛选项的
 */
export default {
    name: "rc-quick-screen",
    props: {
        quickNameLength:{
            type: Number,
            default: 73
        },
        quickList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        projectId:{
            type: String,
            default: ''
        },
    },
    computed: {
        // 横向筛选项
        horizontalList() {
            return this.quickList.filter( item => item.type==='H');
        },
        // 下拉选项
        dropDownList() {
            return this.quickList.filter( item => item.type==='D');
        },
    },
    watch: {
        horizontalList:{
            handler(val) {
                this.$nextTick(() =>{
                    val.forEach((element, i) => {
                        let cur = this.$refs['horListRef'+i];
                        if(cur) {
                            let height = cur[0]?cur[0].offsetHeight : 0;
                            this.$set(this.height,'hoHeight'+ i,height);
                        }
                        // 防止数据变化将已选择的数据项，切换为默认值
                        if(!this.quickParams[element.key] && this.quickParams[element.key] !== '') {
                            Object.prototype.hasOwnProperty.call(element, 'default') && this.$set(this.quickParams,element.key,element.default+'');
                        }
                    });
                });
            },
            deep: true,
            immediate:true
	    },
        dropDownList:{
            handler(val) {
                this.$nextTick(() =>{
                    val.forEach((element) => {
                        // 防止数据变化将已选择的数据项，切换为默认值
                        if(!this.quickParams[element.key] && this.quickParams[element.key] !== null) {
                            Object.prototype.hasOwnProperty.call(element, 'default') && this.$set(this.quickParams,element.key,element.default+'');
                        }
                    });
                });
            },
            deep: true,
            immediate:true
        },
        projectId:{
            handler() {
                this.$nextTick(() =>{
                   this.initOpen(false);
                });
            },
            immediate:true
        }
    },
    data() {
        return {
            quickParams:{},
            height:{ },//每个水平搜索项的高度
            open:{}
        };
    },
    methods: {
        //批量设置展开或收起
        initOpen(isOpen){
            const quickList = this.quickList.filter( item => item.type==='H');
            quickList.forEach((item,index)=>{
                this.$set(this.open,'open'+ index, isOpen);
            });
        },
        /**
         * 切换展开和收起的状态
         * @param 水平项的下标
         */
        changeOpenStatu(index) {
            this.$set(this.open,'open'+ index, !this.open['open'+index]);
        },
        change(quickItem, value) {
            this.$set(this.quickParams, quickItem.key,value);
            if(quickItem.hasChildren) {
                this.$emit("get-children-data", quickItem , value);
            }
        }
    }
};
</script>
<style lang="less" scoped>
    .quick-screen-component{
        padding: 16px 16px 0;
        font-size: 14px;
        .mar-12{
            margin-right: 12px;
        }
        .mar-16{
            margin-right: 16px;
        }
        .font-16{
            font-size: 16px;
        }
        .quick-item{

            margin-bottom: 10px;
            .quick-item-ul{
                width: 100%;
            }
            .quick-h-option{
                flex-flow: wrap;
            }
            .quick-name{
                flex-shrink: 0;
                color: #3a3d4b;
                line-height: 32px;
                text-align: right;
                height: 32px;
                &:last-child{
                    margin-bottom: 10px;
                }
            }
            .quick-btn {
                flex-shrink: 0;
                text-align: center;
                cursor: pointer;
                margin-right: 16px;
                padding-left: 8px;
                padding-right: 8px;
                height: 32px;
                line-height: 32px;
                &.active {
                    font-size: 16px;
                    border-radius: 4px;
                    background-color: #f4f7fa;
                }

            }
            &.pack{
                height: 32px;
                overflow: hidden;
            }

        }
        .unfold{
            width: 50px;
            flex-shrink:0;
            cursor: pointer;
            height: 32px;
            line-height: 32px;
        }
    }
</style>
